
export default {
  /*
  ** Nuxt rendering mode
  ** See https://nuxtjs.org/api/configuration-mode
  */
  css: [
    { src: '~assets/css/index.scss', lang: 'scss' }, // 指定
    'vant/lib/index.less',
    { src: '~assets/css/sprite.scss', lang: 'scss' } // sprite.css
  ],
  mode: 'universal',
  /*
  ** Nuxt target
  ** See https://nuxtjs.org/api/configuration-target
  */
  target: 'server',
  /*
  ** Headers of the page
  ** See https://nuxtjs.org/api/configuration-head
  */
  server: {
    port: 3000, // default: 3000
    host: '0.0.0.0' // default: localhost
  },
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Global CSS
  */
  /*
  ** Plugins to load before mounting the App
  ** https://nuxtjs.org/guide/plugins
  */
  plugins: [
    { src: '~/plugins/lazyload' }
  ],
  /*
  ** Auto import components
  ** See https://nuxtjs.org/api/configuration-components
  */
  components: true,
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module'
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/style-resources' // 添加对应的模块
  ],
  styleResources: {
    scss: [
      './assets/css/index.scss' // 全局 scss 变量
      // './assets/style/mixins.scss' // 全局 scss 混合
    ]
  },
  /*
  ** Build configuration
  ** See https://nuxtjs.org/api/configuration-build/
  */
  build: {
    // 添加这个是关键，添加后babel才会处理依赖包vant里面的代码
    transpile: [/vant.*?less/],
    babel: {
      plugins: [
        ['import', {
          libraryName: 'vant',
          style: (name) => {
            return `${name}/style/less.js`
          }
        }, 'vant']
      ]
    },
    extend (config, ctx) {
      // 如果是开发环境而且在客户端中执行
      if (ctx.isDev && ctx.isClient) {
        // 雪碧图插件
        const path = require('path')
        const SpritesmithPlugin = require('webpack-spritesmith')
        // 雪碧图处理模板
        /* 这里是我们自己修改的模板样式，webpack，会自动生成一个sprite.css的样式，有时候生成的不满意，
我们可以在这里修改，可以自己打印一下 data里面的参数，看着就会大概明白（先看下面的配置，最后看这个模板）
*/
        const templateFunction = function (data) {
          const shared = '.icon { background-image: url(I);background-size: Wpx Hpx;}'.replace('I', data.sprites[0].image).replace('W', data.spritesheet.width)
            .replace('H', data.spritesheet.height)

          const perSprite = data.sprites.map(function (sprite) {
            return '.icon-N { width: Wpx; height: Hpx; background-position: Xpx Ypx; }'
              .replace('N', sprite.name)
              .replace('W', sprite.width)
              .replace('H', sprite.height)
              .replace('X', sprite.offset_x)
              .replace('Y', sprite.offset_y)
          }).join('\n')

          return shared + '\n' + perSprite
        }
        // 雪碧图扩展webpack配置
        config.plugins.push(
          new SpritesmithPlugin({
            /*
            目标小图标，这里就是你需要整合的小图片的老巢。
            现在是一个个的散兵，把他们位置找到，合成一个
            */
            src: {
              cwd: path.resolve(__dirname, './static/images/sprite'),
              glob: '*.png'
            },
            // 输出雪碧图文件及样式文件，这个是打包后，自动生成的雪碧图和样式，自己配置想生成去哪里就去哪里
            target: {
              image: path.resolve(__dirname, './static/images/sprite.png'),
              css: [
                [path.resolve(__dirname, './assets/css/sprite.scss'), {
                  // 引用自己的模板
                  format: 'function_based_template'
                }]
              ]
            },
            // 自定义模板入口，我们需要基本的修改webapck生成的样式，上面的大函数就是我们修改的模板
            customTemplates: {
              function_based_template: templateFunction
            },
            // 样式文件中调用雪碧图地址写法（Readme这么写的）
            apiOptions: {
              cssImageRef: '../../static/images/sprite.png'
            },
            // 让合成的每个图片有一定的距离，否则就会紧挨着，不好使用
            spritesmithOptions: {
              padding: 20
            }
          })
        )
      }
    },
    postcss: {
      // 添加插件名称作为键，参数作为值
      // 使用npm或yarn安装它们
      plugins: {
        // 通过传递 false 来禁用插件
        'postcss-write-svg': {
          uft8: false
        },
        'postcss-cssnext': {},
        'postcss-aspect-ratio-mini': {},
        'postcss-px-to-viewport': {
          viewportWidth: 375, // 设计稿宽度
          // viewportHeight: 1334, // 设计稿高度，可以不指定
          unitPrecision: 3, // px to vw无法整除时，保留几位小数
          viewportUnit: 'vw', // 转换成vw单位
          selectorBlackList: ['.ignore', '.hairlines'], // 不转换的类名
          minPixelValue: 1, // 小于1px不转换
          mediaQuery: false, // 允许媒体查询中转换
          exclude: /(\/|\\)(node_modules)(\/|\\)/ // 不转换我们引入的第三方包
        },
        'postcss-viewport-units': {}
        // "cssnano": {
        //   preset: "advanced",
        //   autoprefixer: false, // 和cssnext同样具有autoprefixer，保留一个
        //   "postcss-zindex": false
        // }
      }
    }
  }
}
